$def with (content)

$code:
    uplugin_menu = []
    for p, el in enumerate(gv.plugin_menu):
        uel = [el[0], el[1]]
        uplugin_menu.append(uel)

$code:
    def plugin_adjustment():
        duration_adjustments = [gv.sd[entry] for entry in gv.sd if entry.startswith('wl_')]
        result = 100.0
        for entry in duration_adjustments:
            result *= entry / 100.0
        return '%.0f' % result

$code:
    days= json.dumps([_('Sunday'), _('Monday'), _('Tuesday'), _('Wednesday'), _('Thursday'), _('Friday'), _('Saturday')])
    months = json.dumps([_('January'), _('February'), _('March'), _('April'), _('May'), _('June'), _('July'), _('August'), _('September'), _('October'), _('November'), _('December')])

$code:
    deviceOffset = gv.tz_offset

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="IE=edge">  
    
    <title>${content.title + (" - " + gv.sd['name'] if gv.sd['name'] != "SIP" else "")}</title>
    
    <link rel="apple-touch-icon" sizes="57x57" href="static/images/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="static/images/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="static/images/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="static/images/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="static/images/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="static/images/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="static/images/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="static/images/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="static/images/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="static/images/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="static/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="static/images/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="static/images/favicon-16x16.png">
    <link rel="manifest" href="static/images/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="static/images/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">

    <link href="${'static/themes/' + gv.sd['theme'] + '/base.css'}" rel="stylesheet" type="text/css"/>
    <style>
    	div {overflow-y: hidden;}
    	div.row {overflow-y: visible;}
        .bluebg {background-color:lightblue;}
        .opOn, .wlOn, .rsOff {color:green;}
        .opOff, .wlOff, .rsOn {color:red;}
        .rdOff {color:black;}
        .rdOn {color:red;}
        .rsNA, .station_waiting {color:gray;}
        .station_disabled {color:gray;}

        #lastRun {color:gray;}
        #stations {width:100%;}
        #pluginMenu {display: none; z-index: 99}
        .program {line-height:22px}
        .strike {text-decoration:line-through;}

        .progstation_on {background-color:rgb(154, 250, 154); color:black; font-size:10pt}
        .progstation_off {background-color:white; color:lightgray; font-size:10pt}
        button.cDisable.toggle {float:right; width:130px; margin:0px; padding:0px; background-color:transparent}
        button.cDisable.toggle span.toggleleft {width: 30px;}
        button.cDisable.toggle span.toggleright {width: 30px;}

        button#tooltip {height:24px;}
        .tooltip {background-color:rgb(255, 242, 184); display:none; font-size:10pt; margin-left:4px;}
        .label {font-weight:bold; float:left; width:160px; text-align:right; padding-right:4px;}

        td.stationNumber, td.stationShow, td.stationIgnore, td.stationIgnoreML, td.stationMaster, td.stationControls, td.stationIgnoreWL {text-align:center;}
        td.stationName {text-align:left; padding-left:1em;}


         .piDatFooter {
         	text-align: right;
          	right: 0; 
         	background-color:white;
         	color:black;
         	font-size:12pt;
          	margin-bottom:10px;
         	width: 70%;
         	padding:0px 4px 0px 4px;     	 
         	} 

    </style>
    
    <script src="static/scripts/jquery-3.6.1.min.js"></script>
    
    <script> 
	    function refreshPage() {
	    	location.reload(true);
	    	}    
    </script>
    
    <script>
        // Variables set server-side
        let devt = ${gv.now};
        let devTzOffset = ${deviceOffset} * 1000;
        let cliTzOffset = new Date().getTimezoneOffset() * 60 * 1000;
        let tzDiff = cliTzOffset - devTzOffset;
        let timeFormat = ${gv.sd["tf"]};
        let dayList = $:{days};
        let monthList = $:{months};

        let cputemp = "${gv.cputemp}";
        let tempunit = "${gv.sd['tu']}";

        $if content.page != 'login':
            let snames = $:{json.dumps(gv.snames, ensure_ascii=False)};
            let lrun = ${gv.lrun};
            let rdst = ${gv.sd['rdst']}*1000;
            let upas = ${gv.sd['upas']};
            let en = ${gv.sd['en']};
            let mm = ${gv.sd['mm']};
            let rd = ${gv.sd['rd']};
            let wl = ${gv.sd['wl']};
            let wlx = $:{plugin_adjustment()};
            let iw = ${gv.sd['iw']};
            let mas = ${gv.sd['mas']};
            let nbrd = ${gv.sd['nbrd']};
            let plugins = $:{json.dumps(gv.plugin_menu, ensure_ascii=False)};
            let progs = $:{json.dumps(gv.pd, ensure_ascii=False)};
            let sdt = ${gv.sd['sdt']};
            let seq = ${gv.sd['seq']};
            let run_once = $:{json.dumps(_('Run-once'), ensure_ascii=False)};
            let man = $:{json.dumps(_('Manual'), ensure_ascii=False)};
            let program = $:{json.dumps(_('Program'), ensure_ascii=False)};
            let idd = $:{gv.sd['idd']};
            let pluginVals;           

            jQuery(document).ready(function(){
                jQuery('#pluginMenu').append('<button class="execute" id="pluginMgr" type="button" onclick="window.location.href=\'' + '/plugins\'">$_('Manage Plugins')</button><br/>');
                $if len(uplugin_menu) > 0:
                	$for i, plugin in enumerate(uplugin_menu):

                        jQuery('#pluginMenu').append('<button class="execute" type="button" onclick="window.location.href=\'' + '${plugin[1]}\'">${plugin[0]}</button><br/>');
                $else:
                    jQuery('#pluginMenu').append('None<br/>');


                jQuery("#bPlugins").click(function(e) {
                    let btn = jQuery("#bPlugins");
                    jQuery("#pluginMenu").css({
                        position: 'absolute',
                        top: btn.offset().top + btn.outerHeight() + 10,
                        left: btn.offset().left
                    }).slideToggle();
                    e.stopPropagation();
                });

                jQuery(document).click(function(){
                    jQuery("#pluginMenu").slideUp();
                });
                
                $if gv.pluginFtr or gv.pluginStn:
                	$if gv.pluginFtr:
                	    $for i in range(len(gv.pluginFtr)):
                	        jQuery("#pluginPars").append('<p id="${"piData" + str(i)}"><span name="label">${gv.pluginFtr[i]["label"]}</span><span name="val">${str(gv.pluginFtr[i]["val"])}</span><span name="unit">${gv.pluginFtr[i]["unit"]}</span></p>');
                    setInterval(dataTimer, 2000);
            });
            
            function dataTimer() {
                // Call to get plugin data
                   jQuery.getJSON("/api/plugins", function(piVals) {   
                	   pluginVals = piVals;
                	   	   if (piVals.fdata) {
	                		   for (let i = 0; i < piVals.fdata.length; i++) {
							   let parID = 'piData' + piVals.fdata[i][0];
	                    	   jQuery('p#'+parID ).find('span[name="val"]').text(piVals.fdata[i][1])};
                	   	   }
                   });
                }           
            
    </script>
    <script src="static/scripts/behaviors.js"></script>
    <script src="static/scripts/schedule.js"></script>
    <script src="static/scripts/intervalSelect.js"></script>  

    $for script in gv.plugin_scripts:
        <script src="static/scripts/$:{script}"></script>
    
</head>

<body>
    <div class="content">
        <form name="tt" action="/ttu" method="get">
            <input type="hidden" name="tunit">
        </form>

        <div id="pluginMenu">
        </div>

        <div class="header">
            <div class="title">${gv.sd['name'] if gv.sd['name'] != "SIP" else ""}</div>
        </div>

        <div class="body">
            <div id="status">
                <p id="deviceTime"><span class="time"></span><span class="second"></span><span class="ampm"></span></p>
                <p id="deviceDate"></p>
            </div>

            <div class="panel">

                $if content.page != 'login':
                    <div id="nav">
                        <button id="bHome" class="home${' here' if content.page=='home' else ''}" title=$:{json.dumps(_('Home'), ensure_ascii=False)}>$_('Home')</button>
                        <button id="bPrograms" class="programs${' here' if content.page=='programs' else ''}" title=$:{json.dumps(_('Define Programs'), ensure_ascii=False)}>$_('Programs')</button>
                        <button id="bRunOnce" class="start${' here' if content.page=='runonce' else ''}" title=$:{json.dumps(_('Define Run Once Program'), ensure_ascii=False)}>$_('Run Once')</button>
                        <button id="bPlugins" class="plugins${' here' if content.page=='plugins' else ''}" title=$:{json.dumps(_('Access Plugins'), ensure_ascii=False)}>$_('Plugins')</button>
                        <button id="bLog" class="log${' here' if content.page=='log' else ''}" title=$:{json.dumps(_('View Log'), ensure_ascii=False)}>$_('Log')</button>
                        <button id="bOptions" class="options${' here' if content.page=='options' else ''}" title=$:{json.dumps(_('Options'), ensure_ascii=False)}>$_('Options')</button>
                        $if (gv.sd['upas']):
                            <button id="bLogout" class="logout" title=$:{json.dumps(_('Logout'), ensure_ascii=False)}>$_('Logout')</button>
                    </div>

                $:{content}

            </div>
        </div>
        <div class="footer">
          $if content.page != 'login':
              $if (gv.pluginFtr):
                  <div  align="right">
                  <div class="piDatFooter" id="pluginPars"></div> <!--div for plugin data display -->
                  </div>                   
              <div>
                  <div class="controls">
                    <button id="bHelp" class="help" title=$:{json.dumps(_('Documentation wiki'), ensure_ascii=False)}>&nbsp;&nbsp;$_('?')&nbsp;&nbsp;</button>
                  </div>
              </div>

          <div>
             <form name="tt" action="${'/ttu'}" method="get">
                 <input type="hidden" name="tunit" value="${gv.sd['tu']}">
                 <div class="text-nowrap">$_('CPU Temp'):
                     <button type="submit"  id="heat" style="color: #fff" class="font-weight-bold btn-link btn" title=$:{json.dumps(_('Click to toggle Celsius &lt; &gt; Fahrenheit'), ensure_ascii=False)}>
                     ${temp_string(convert_temp(gv.cputemp,'C', gv.sd['tu']), gv.sd['tu'])}
                     </button>
                 </div>
             </form>
          </div>


          <div>
              <div>
                <p class="text-nowrap"><a target="_blank" href="https://github.com/Dan-in-CA/sip">$_('Software')</a> $_('version'): <b>${gv.ver_str} (${gv.ver_date})</b></p>
              </div>
          </div>

        </div>
    </div>   
    
</body>
</html>
